import React, { useState, useEffect } from 'react';
import { postSysUserUpdMobile } from '../../../Api/userUrl'
import { getSysGetCode } from '../../../Api/loginUrl'
import { ChangePasswordAll, ChangePhoneForm } from './style';
import { PageHeader, Form, Input, Button, message, Row, Col } from 'antd'

const ChangePhone = () => {
    const [form] = Form.useForm();
    const { resetFields } = form;
    const [timeValue, setTimeValue] = useState(2); //验证码即时
    const [authCode, setAuthCode] = useState(true); //验证码按钮样式
    const [mobile, setMobile] = useState(null) //电话号码
    const [identification, setIdentification] = useState(null); //验证码标识
    const [userMobile, setUserMobile] = useState(undefined); // 用户本来手机号
    useEffect(() => {
        setUserMobile(sessionStorage.getItem('mobile'))
    }, [userMobile])
    const onFinish = (values) => {
        const parames = {
            code: values.code,
            id: sessionStorage.getItem('userId'),
            mark: identification,
            phone: values.mobile
        }
        ;(async () => {
            const {code, msg } = await postSysUserUpdMobile(parames);
            if(code === '20000') {
                message.success('修改成功');
                sessionStorage.setItem('mobile', values.mobile);
                setUserMobile(values.mobile)
                resetFields()
            }else{
                message.error(msg);
            }
        })()
    };
    const handleAuthCodeFun = () => {
        if (!mobile) {
            message.error('请输入手机号');
            return;
        }
        setAuthCode(false);
        ; (async () => {
            const { code, msg, data } = await getSysGetCode({ mobile });
            if (code === '20000') {
                setIdentification(data);
                let timer = setInterval(() => {
                    setTimeValue(timeValue => {
                        if (timeValue <= 0) {
                            clearInterval(timer);
                            setAuthCode(true);
                            setTimeValue(60);
                        } else {
                            return timeValue - 1
                        }

                    })
                }, 1000);
            } else {
                message.error(msg);
            }
        })();
    }
    return <ChangePasswordAll>
        <PageHeader
            className="site-page-header"
            title="修改手机号"
        ></PageHeader>
        <ChangePhoneForm>
        <Row>
                        <Col span={12}>当前绑定手机号：</Col>
                        <Col span={12}>{
                            userMobile === "null" ? '暂无绑定手机号' :userMobile 
                        }</Col>
                       
                    </Row>
            <Form
                {...layout}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                form={form}
            >
                <Form.Item
                    label="手机号"
                    name="mobile"
                    rules={[{ required: true, message: '请输入手机号!' }]}
                >
                    <Input value={mobile} onChange={(e) => setMobile(e.target.value)} />
                </Form.Item>
                <Form.Item
                    label="验证码"
                    name="code"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Row>
                        <Col span={12}><Input /></Col>
                        <Col span={1}></Col>
                        <Col span={11}>
                            {
                                authCode ? <Button style={{ width: '100%' }} type="primary" onClick={() => handleAuthCodeFun()}>
                                    获取验证码
                                </Button> : <Button type="primary" disabled >
                                    {timeValue}s后重新发送
                                </Button>
                            }
                        </Col>
                    </Row>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </ChangePhoneForm>

    </ChangePasswordAll>
}
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 18,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export default ChangePhone;